<template>
    <div>
        <!-- 404 -->
        <div class="not" v-if="flag">
            <img :src="'./static/images/homeOrder.gif'">
            <h3>输入地址后才能订餐哦！</h3>
            <el-button type="success" class="btn" @click="address">手动选择地址</el-button>
        </div>
        <!-- bingo -->
        <div class="bingo goodsList" v-if="!flag">
            <!-- nav -->
            <nav>
                <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="item in nav" :key="item.id">
                        <a>
		                    <img :src="item.img" class="mui-icon mui-icon-home">
		                    <div class="mui-media-body">{{item.name}}</div>
                        </a>
                    </li>
		        </ul>
            </nav>
            <!-- promote -->
            <div class="promote">
                <!-- set -->
                <div class="set">
                    <div class="setInfo">
                        <h3>品质套餐</h3>
                        <i>搭配齐全吃得好</i>
                        <span>立即抢购 ></span>
                    </div>
                    <img :src="'./static/images/set.jpg'" class="setImg">
                </div>
                <!-- vip -->
                <div class="vip">
                    <div class="super"><img :src="'./static/images/vip.jpg'">超级会员<span> · 每月领20元红包</span></div>
                    <div class="toJoin">立即开通 ></div>
                </div>
                <!-- swipe -->
                <div class="mui-slider">
                    <div class="mui-slider-group mui-slider-loop">
                        <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img :src="'./static/images/swipe4.jpg'" /></a></div>
                        <div class="mui-slider-item"><a href="#"><img :src="'./static/images/swipe1.jpg'" /></a></div>
                        <div class="mui-slider-item"><a href="#"><img :src="'./static/images/swipe2.jpg'" /></a></div>
                        <div class="mui-slider-item"><a href="#"><img :src="'./static/images/swipe3.jpg'" /></a></div>
                        <div class="mui-slider-item"><a href="#"><img :src="'./static/images/swipe4.jpg'" /></a></div>
                        <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img :src="'./static/images/swipe1.jpg'" /></a></div>
                    </div>
                </div>
            </div>
            <!-- shoplist-title -->
            <div class="shoplist-title">推荐商家</div>
            <!-- shoplist -->
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="综合排序" name="first"></el-tab-pane>
                <el-tab-pane label="距离最近" name="second"></el-tab-pane>
                <el-tab-pane label="品质联盟" name="third"></el-tab-pane>
                <el-tab-pane label="筛选" name="fourth"></el-tab-pane>
            </el-tabs>
            <ul class="mui-table-view" id="refreshContainer">
                <li class="mui-table-view-cell mui-media" v-for="item in shop" :key="item.id">
                    <router-link :to="'/shop/' + item.id">
                        <img class="mui-media-object mui-pull-left" :src="item.img">
                        <div class="mui-media-body">
                            <div class="title">
                                <span class="name"><i v-if="item.isbrand == 1 ? true : false">品牌</i>{{item.name}}</span>
                                <span class="el-icon-more"></span>
                            </div>
                            <div class="appraise">
                                <el-rate v-model="item.star" disabled show-score text-color="#ff9900"></el-rate>
                                <span class="sales">月售{{item.num}}单</span>
                            </div>
                            <div class="details">
                                <span class="detailsLeft">
                                    <span>¥{{item.startPrice}}起送</span> | 
                                    <span>配送费¥{{item.deliveryCost}}</span>
                                </span>
                                <span class="detailsRight">
                                    <span>{{item.distance}}km</span> | 
                                    <span>{{item.min}}分钟</span>
                                </span>
                            </div>
                            <div class="public">
                                <span v-for="li in item.public" :key="li">{{li}}</span>
                                <i class="el-icon-star-on" v-if="item.ishot == 1 ? true : false">口碑人气好店</i>
                            </div>
                        </div>
                    </router-link>
                </li>
            </ul>
            <!-- backtop -->
            <div class="backTop el-icon-top" @click="goAnchor" v-show="isTop"></div>
        </div>
    </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
import mui from '../../assets/mui/dist/js/mui.min.js'
export default {
    data() {
        return {
            flag: true,
            nav: [{
                id: 1,
                img: './static/images/nav1.jpg',
                name: '美食'
            },{
                id: 2,
                img: './static/images/nav2.jpg',
                name: '夜宵'
            },{
                id: 3,
                img: './static/images/nav3.jpg',
                name: '商超便利'
            },{
                id: 4,
                img: './static/images/nav4.jpg',
                name: '水果'
            },{
                id: 5,
                img: './static/images/nav5.jpg',
                name: '医药健康'
            },{
                id: 6,
                img: './static/images/nav6.jpg',
                name: '浪漫鲜花'
            },{
                id: 7,
                img: './static/images/nav7.jpg',
                name: '汉堡披萨'
            },{
                id: 8,
                img: './static/images/nav8.jpg',
                name: '厨房生鲜'
            },{
                id: 9,
                img: './static/images/nav9.jpg',
                name: '炸鸡炸串'
            },{
                id: 10,
                img: './static/images/nav10.jpg',
                name: '地方菜系'
            },],
            activeName: 'first',
            shop: [{
                id: 1,
                img: './static/images/shopList2.jpg',
                name: '香他她煲仔饭（潇湘奥园店）',
                isbrand: 1,
                star: 4.8,
                num: 660,
                startPrice: 20,
                deliveryCost: 0.6,
                distance: 1.37,
                min: 22,
                public: ['披萨', '品质联盟'],
                ishot: 1
            }, {
                id: 2,
                img: './static/images/shopList1.jpg',
                name: '必胜客宅急送(金星中路店)',
                isbrand: 1,
                star: 4.7,
                num: 694,
                startPrice: 0,
                deliveryCost: 5,
                distance: 1.34,
                min: 40,
                public: ['披萨', '品质联盟'],
                ishot: 1
            }, {
                id: 3,
                img: './static/images/shopList3.jpg',
                name: '小马哥卤肉饭(润泽园店)',
                isbrand: 1,
                star: 4.6,
                num: 659,
                startPrice: 20,
                deliveryCost: 4.1,
                distance: 2.74,
                min: 38,
                public: ['其他快餐', '品质联盟'],
                ishot: 0
            }, {
                id: 4,
                img: './static/images/shopList4.jpg',
                name: '老长沙龙虾馆',
                isbrand: 0,
                star: 4.3,
                num: 4854,
                startPrice: 0,
                deliveryCost: 2,
                distance: 2.18,
                min: 39,
                public: ['小龙虾', '品质联盟'],
                ishot: 0
            }, {
                id: 5,
                img: './static/images/shopList5.jpg',
                name: '蒸滋味中式快餐(奥园店)',
                isbrand: 1,
                star: 4.5,
                num: 128,
                startPrice: 15,
                deliveryCost: 2.6,
                distance: 1.28,
                min: 24,
                public: ['其他快餐'],
                ishot: 1
            }, ],
            isTop: false
        }
    },
    methods: {
        // 跳转到地址页
        address() {
            MessageBox('饿了么提示', '您还未登录');
            this.$router.push({path: '/login'})
        },
        // 待用功能
        handleClick(tab, event) {
            console.log(tab, event);
        },
        // 向上锚点
        goAnchor() {
            document.body.scrollTop = 0; // chrome
            document.documentElement.scrollTop = 0; // firefox
        },
        // 返回顶部按钮显示隐藏
        handleScroll () {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            if (scrollTop >= 500) {
                this.isTop = true
            } else {
                this.isTop = false
            }
        },
    },
    created() {
        if (this.$store.state.status == 1) this.flag = false

    },
    mounted() {
        const gallery = mui('.mui-slider');
        gallery.slider({
            interval:3000
        });
        window.addEventListener('scroll', this.handleScroll);
    }
}
</script>

<style>
    .goodsList .el-tabs__nav {
        left: 50%;
        transform: translateX(-50%)!important;
    }
    .goodsList .el-tabs__header {
        margin: 0!important;  
    }
    .goodsList .el-rate__icon {
        margin-right: 0;
        font-size: 11px;
    }
    .goodsList .el-tabs__nav-wrap::after {
        height: 0;
    }
</style>


<style scoped>
    /* not */
    .not {
        position: fixed;
        top: 100px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
    }
    /* bingo */
    /* nav */
    .mui-table-view {
        padding: 11px 0;
        background: #fff;
    }
    .mui-col-xs-4 {
        width: 20%;
        height: 75px;
        padding: 0!important;
    }
    .mui-table-view-cell {
        padding: 26px 15px;
        border: 0!important;
    }
    .mui-table-view-cell img {
        width: 45px;
        height: 45px;
    }
    .mui-table-view-cell a {
        padding: 0!important;
    }
    .mui-table-view-cell::after {
        height: 0;
    }
    .mui-media-body {
        margin: 0!important;
        font-size: 12px!important;
        color: #666;
    }
    /* promote */
    .promote {
        padding: 0 10px 8px 10px;
    }
    /* set */
    .set {
        display: flex;
        height: 110px;
        padding: 12px 0 0 15px;
        background: linear-gradient(0deg,#f4f4f4 5%,#fafafa 95%);
    }
    .setInfo {
        display: flex;
        flex-direction: column;
        flex: 6;
    }
    .setImg {
        height: 100%;
        width: auto;
        margin-right: 10px;
    }
    .setInfo h3 {
        font-size: 17px;
        color: #333;
        margin-top: 0;
    }
    .setInfo i {
        margin-bottom: 7px;
        font-style: normal;
        font-size: 13px;
        color: #777;
    }
    .setInfo span {
        font-size: 12px;
        color: #af8260;
        font-weight: 700;
    }
    /* vip */
    .vip {
        margin: 4px 0;
        padding: 0 10px 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        /* line-height: 40px; */
        background-image: linear-gradient(90deg,#ffefc4,#f3dda0);
    }
    .super {
        font-size: 14px;
        font-weight: 700;
        color: #644f1b;
    }
    .super img {
        width: 17px;
        height: 17px;
        margin-right: 5px;
        /* vertical-align: middle; */
    }
    .super span {
        font-size: 12px;
        font-weight: 400;
    }
    .toJoin {
        font-size: 12px;
        color: #644f1b;
    }
    /* shoplist-title */
    .shoplist-title {
        position: relative;
        height: 36px;
        font-size: 15px;
        line-height: 36px;
        text-align: center;
    }
    .shoplist-title::before ,
    .shoplist-title::after{
        position: absolute;
        display: block;
        top: 16px;
        content: "";
        width: 20px;
        height: 2px;
        background-color: #999;
    }
    .shoplist-title::before {
        left: 125px;
    }
    .shoplist-title::after {
        right: 125px;
    }
    /* shoplist */
    .mui-table-view::before,
    .mui-table-view::after {
        height: 0;
    }
    .mui-table-view-cell a {
        margin: -11px -5px;
    }
    .mui-table-view-cell .mui-media-object {
        max-width: 65px;
        width: 65px;
        height: 65px;
    }
    .title {
        display: flex;
        justify-content: space-between; 
    }
    .name {
        font-weight: 700;
        font-size: 15px;
        color: #333;
    }
    .name i {
        padding: 2px;
        margin-right: 3px;
        font-style: normal;
        color: #6f3f15;
        font-size: 11px;
        background-image: linear-gradient(-139deg,#fff100,#ffe339);
    }
    .el-icon-more {
        font-size: 11px;
        color: #666;
    }
    .el-rate {
        margin: 5px 5px 0 0;
    }
    .sales {
        color: #666;
        font-size: 11px;
        line-height: 25px;
    }
    .appraise {
        display: flex;
    }
    .details {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
    }
    .detailsLeft {
        color: #666;
    }
    .detailsRight {
        color: #999;
    }
    .public {
        margin-top: 10px;
        font-size: 10px;
        color: rgb(51, 51, 51);
    }
    .public span {
        color: #666;
        padding: 1px 3px;
        margin-right: 3px;
        border: 1px solid rgb(221, 221, 221);
    }
    .public i {
        font-style: normal;
        color: #e8470b;
    }
    /* backtop */
    .backTop {
        position: fixed;
        z-index: 3;
        right: 20px;
        bottom: 80px;
        width: 43px;
        height: 43px;
        border: 1px solid #999;
        border-radius: 50%;
        background: #fff;
        transition: opacity .3s;
        font-size: 24px;
        color: #999;
        text-align: center;
        line-height: 43px;
    }
</style>